<script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'

  import PageHeader from "@/components/PageHeader.vue";
  import SelectCoupon from "@/views/order/components/SelectCoupon.vue";
  import SelectAddress from "@/views/order/components/SelectAddress.vue";
  import {useCartStore} from "@/stores/index.js";
  import {confirmOrderApi, createOrderApi} from "@/api/index.js";
  import {message} from "ant-design-vue";
  const router = useRouter()
  const selectCouponRef = ref()
  const selectAddressRef = ref()
  const address = ref({
    id: '',
    name: '',
    phone: '',
    addr: '',
    modify_region: {
      name: ''
    }
  }) // 地址信息
  const note = ref('') // 备注
  const totalPrice = ref() // 总金额
  const payment = ref() // 实付款
  const integralMin = ref() // 积分抵扣金额
  const discount = ref() // 优惠金额
  const goodsList = ref([]) // 商品列表
  const saleMobile = ref('') // 销售人员编码
  const shopType  = ref() // 店铺类型
  const coupon = ref({
    id: '',
    name: ''
  })
  const useIntegral = ref('1') // 是否使用积分抵扣
  const getOrderInfo = () => {
    const { selectedInfo } = useCartStore()
    const params = {
      sku_details: selectedInfo.createOrder,
      goods_type: 4,
      coupon_id: coupon.value.id,
      use_integral: useIntegral.value,
    }
    createOrderApi(params).then(res => {
      goodsList.value = res?.shop_lists
      address.value = res?.defaultAddress
      discount.value = res?.discount
      integralMin.value = res?.goods_discount
      totalPrice.value = res?.goods_amount
      payment.value = res?.pay_amount
    }).catch(err => {
      router.back()
      message.error(err.msg)
    })
  }
  // 选中优惠券
  const selectedCoupon = (e) => {
    coupon.value = e
    getOrderInfo()
    selectCouponRef.value.close()
  }
  const selectedAddress = (e) => {
    address.value = e
    selectAddressRef.value.close()
  }
  // 提交订单
  const submit = () => {
    const { selectedInfo } = useCartStore()
    const params = {
      pay_type: 'offline',
      address_id: address.value.id,
      note: note.value,
      goods_type: 4,
      sale_type: saleMobile.value,
      shop_type: shopType.value,
      sku_details: selectedInfo.createOrder,
      coupon_id: coupon.value.id,
      use_integral: useIntegral.value,
    }
    confirmOrderApi(params).then(res => {
      router.replace({name: 'success', query: {price: res?.total_amount, order_sn: res?.trade_sn, type: 'order'}})
    }).catch(err => {
      message.error(err.msg)
    })
  }
  onMounted(() => {
    getOrderInfo()
  })
</script>

<template>
  <div class="confirm-order">
    <PageHeader>
      <a-button type="primary" size="small" style="background: var(--primary)" @click="submit"> 提交订单 </a-button>
    </PageHeader>
    <div class="address-box">
      <div class="address-item">
        <div class="address-info">
          <div class="name-mobile"> {{ address?.name }} {{ address.phone }} </div>
          <div class="address"> {{ address.modify_region.name }} {{ address.addr }} </div>
        </div>
        <div class="address-footer">
          <div class="actions">
            <div class="btn" @click="selectAddressRef.open()"> 切换地址 </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cart-list">
      <div class="cart-shop" v-for="(item, index) in goodsList" :key="item.id">
        <div class="shop-title">
          <img :src="item?.img" alt="" class="shop-img">
          <div class="shop-name"> {{ item.name }} </div>
        </div>
        <div class="good-list">
          <div class="goods-item" v-for="(goods, gIndex) in item?.goods" :key="goods.sku">
            <div class="box">
              <img :src="goods?.thumb_url" alt="" class="goods-img"/>
              <div class="goods-info">
                <div class="goods-name"> {{ goods.goods_name }} </div>
                <div class="goods-spec ellipsis"> 规格： {{ goods?.spece_value_title?goods?.spece_value_title:'默认规格' }} </div>
                <div class="actions">
                </div>
              </div>
            </div>
            <div class="box mt">
              <div class="goods-price">
                <div class="new-price fh">  {{ goods.price }} </div>
                <div class="old-price fh">  {{ goods.original_price }} </div>
              </div>
              <div class="num"> x{{ goods?.num }} </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="order-info">
      <div class="item">
        <div class="label"> 总金额 </div>
        <div class="value"> {{ totalPrice }} </div>
      </div>
      <div class="item">
        <div class="label"> 优惠券 </div>
        <div class="value pointer" @click="selectCouponRef.open(totalPrice)"> {{ coupon.name?coupon.name:'选择优惠券' }} </div>
      </div>
      <div class="item">
        <div class="label"> 积分抵扣 </div>
        <a-switch v-model:checked="useIntegral" checked-children="开启" un-checked-children="关闭" checkedValue="1" un-checked-value="0" @change="getOrderInfo"/>
      </div>
      <div class="item">
        <div class="label"> 积分抵扣金额 </div>
        <div class="value" style="color: #f40"> - {{ integralMin }} </div>
      </div>
      <div class="item">
        <div class="label"> 优惠金额 </div>
        <div class="value" style="color: #f40"> - {{ discount }} </div>
      </div>
      <div class="item">
        <div class="label"> 实付款 </div>
        <div class="value"> {{ payment }} </div>
      </div>
    </div>
    <div class="dy-info">
      <div class="item">
        <div class="label"> 销售人员编码 </div>
        <input type="number" v-model="saleMobile" placeholder="请输入销售人员编码" />
      </div>
      <div class="item">
        <div class="label"> 店铺类型 </div>
        <a-select class="pick-type" v-model:value="shopType" placeholder="请选择店铺类型" :bordered="false">
          <a-select-option value="wb"> WB </a-select-option>
          <a-select-option value="ozon"> OZON </a-select-option>
          <a-select-option value="avito"> AVito </a-select-option>
        </a-select>
<!--        <input type="text" v-model="shopType" placeholder="请输入店铺类型" />-->
      </div>
    </div>
    <div class="notice">
      <div class="title"> 备注 </div>
      <textarea class="textarea" v-model="note" placeholder="请输入备注信息~"/>
    </div>
    <SelectCoupon ref="selectCouponRef" @selected="selectedCoupon"/>
    <SelectAddress ref="selectAddressRef" @selected="selectedAddress"/>
  </div>
</template>

<style scoped lang="scss">
  .confirm-order {
    padding: 40px 10px;
    .pointer {
      cursor: pointer;
    }
    .address-box {
      .address-item {
        gap: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
        box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
        .address-info {
          gap: 10px;
          display: flex;
          flex-direction: column;
          .address {
            color: #999;
          }
        }
        .address-footer {
          display: flex;
          justify-content: end;
          padding-top: 10px;
          border-top: 1px solid #eee;
          .btn {
            font-size: 12px;
            padding: 4px 20px;
            border: 1px solid #eee;
            border-radius: 20px;
            cursor: pointer;
            transition: 0.6s all;
            &:hover {
              color: var(--primary);
              border-color: var(--primary);
            }
          }
        }
      }
    }
    .cart-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 10px;
      border-radius: 10px;
      box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
      .cart-shop {
        .shop-title {
          gap: 10px;
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .shop-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
          }
          .shop-name {
            font-size: 18px;
            font-weight: bold;
          }
        }
        .good-list {
          gap: 10px;
          display: flex;
          flex-direction: column;
          .goods-item {
            gap: 20px;
            display: flex;
            align-items: start;
            padding-left: 10px;
            position: relative;
            .box {
              display: flex;
              align-items: start;
              gap: 20px;
            }
            .goods-img {
              width: 100px;
              height: 130px;
              border-radius: 10px;
            }
            .goods-info {
              flex: 1;
              display: flex;
              flex-direction: column;
              gap: 5px;
              .ellipsis {
                max-width: 470px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .goods-name {
                max-width: 470px;
                font-size: 16px;
                font-weight: bold;
              }
              .goods-spec, .shop-name {
                color: #999;
              }
              .actions {
                margin-top: 10px;
                .anticon {
                  color: #999;
                  font-size: 20px;
                  cursor: pointer;
                  margin-right: 10px;
                  &:hover {
                    color: var(--primary);
                  }
                }
              }
            }
            :deep(.ant-input-number) {
              width: 40px;
            }
            :deep(.ant-input-number-group-addon) {
              background-color: transparent;
              border: none;
              padding: 0;
            }
            :deep(.ant-input-number-input) {
              text-align: center !important;
            }
            .ant-btn {
              width: 32px;
              height: 32px;
              padding: 0;
              color: #999;
              border: none;
              border-radius: 10px;
              background-color: #f1f1f5;
              display: flex;
              align-items: center;
              justify-content: center;
              &:hover {
                background-color: #e8e8f0;
              }
              .anticon {
                color: #242424;
                font-size: 16px;
              }
            }
            .goods-price {
              color: #999;
              font-size: 14px;
              font-weight: bold;
              display: flex;
              align-items: center;
              gap: 10px;
              .new-price, .old-price {
                white-space: nowrap;
              }
              .new-price {
                color: #f44;
                font-size: 18px;
              }
              .old-price {
                text-decoration: line-through;
              }
            }
          }

          @media (max-width: 750px) {
            .goods-item {
              display: block;
            }
            .mt {
              margin-top: 20px;
              justify-content: space-between;
            }
            .goods-name, .ellipsis {
              max-width: 100%;
            }
          }
        }
      }
    }
    .order-info, .dy-info {
      padding: 10px 20px;
      margin-top: 10px;
      border-radius: 10px;
      box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 44px;
        border-bottom: 1px solid #eee;
        &:nth-last-of-type(1) {
          border-bottom: none;
        }
        input {
          border: none;
          outline: none;
        }
        .ant-switch-checked {
          background: var(--primary);
        }
        .pick-type {
          border: 1px solid #eee;
          border-radius: 4px;
          width: 152px;
          color: #333;
          transition: all ease-in-out 0.3s;
          &:hover {
            border-color: var(--primary);
          }
        }
      }
    }
    .notice {
      padding: 10px;
      margin-top: 10px;
      border-radius: 10px;
      box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
      .title {
        font-size: 16px;
        margin-bottom: 10px;
      }
      .textarea {
        padding: 10px;
        border-radius: 10px;
        background-color: #f8f8f8;
        border: none;
        width: 100%;
        height: 150px;
        font-size: 14px;
        resize: vertical;
      }
    }
  }
</style>